
<ui:composition  xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:c="http://java.sun.com/jsp/jstl/core"
                 xmlns:pou="http://primefaces.org/ui">

    <div style="overflow: auto">
        <div id="histchart1" style="width: 900px; height: 400px;  float: left"  ></div>

    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            var s1 = [#{graphicUnoP.grapExposOverdue.hs2}]// [200, 600, 700, 1000];
            var s2 = [#{graphicUnoP.grapExposOverdue.hs1}]//[460, -210, 690, 820];

            var maxS1 = Math.max.apply(null, s1);
            var maxS2 = Math.max.apply(null, s2);
            var maxY = 0;
            if (maxS1 > maxS2) {
                maxY = maxS1 * 1.25;
            } else {
                maxY = maxS2 * 1.25;
            }

            //    var s3 = [-260, -440, 320, 200];
            // Can specify a custom tick Array.
            // Ticks should match up one for each y value (category) in the series.
            var ticks = [#{graphicUnoP.grapExposOverdue.hticks}];

            var plot1 = $.jqplot('histchart1', [s1, s2], {title: 'EXPOSICION - OVERDUE',
                // The "seriesDefaults" option is an options object that will
                // be applied to all series in the chart.
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer,
                    rendererOptions: {fillToZero: true},
                    pointLabels: {show: true}
                },
                // Custom labels for the series are specified with the "label"
                // option on the series option.  Here a series option object
                // is specified for each series.
                series: [
                    {label: '#{graphicUnoP.grapExposOverdue.hseriesName2}'},
                    {label: '#{graphicUnoP.grapExposOverdue.hseriesName1}'}//,
                    //            {label:'Airfare'}
                ],
                // Show the legend and put it outside the grid, but inside the
                // plot container, shrinking the grid to accomodate the legend.
                // A value of "outside" would not shrink the grid and allow
                // the legend to overflow the container.
                legend: {
                    show: true, location: 'e'
                            //, placement: 'outsideGrid'
                },
                axes: {
                    // Use a category axis on the x axis and use our custom ticks.
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: ticks
                    },
                    // Pad the y axis just a little so bars can get close to, but
                    // not touch, the grid boundaries.  1.2 is the default padding.
                    yaxis: {
                        pad: 1.05,
                        tickOptions: {formatString: "$%'d"}, 
                        max: maxY
                    }
                }
            });
        });
    </script>
</ui:composition>
